<template>
  <div class="direct-plan-detail-view view-container">
    <header-module
      left-custom
      padding
    >
      <template #left-con>
        <div>
          <span style="font-size: 16px; margin-right: 20px">终端直销规划：{{ datas.planName }}</span>

          <el-tag
            size="small"
            type="warning"
          >{{ getState(datas.planStatus) }}</el-tag>
        </div>
      </template>

      <template #btn>
        <el-button
          class="main-btn"
          size="small"
          @click="onBack"
        >返回</el-button>

        <template v-if="datas.id">
          <el-button
            v-auth="{v:['crm:directPlan:pms'],bool:datas.planStatus == 1 || datas.planStatus == -1 || datas.flowStatus=='REJECT_INITIATOR'}"
            class="delete-btn"
            size="small"
            @click="onDelete"
          >删除
          </el-button>
          <el-button
            v-auth="{v:['crm:directPlan:pms'],bool:datas.planStatus == 1 || datas.planStatus == -1 || datas.flowStatus=='REJECT_INITIATOR'}"
            class="main-btn"
            size="small"
            type="primary"
            @click="onEdit"
          >编辑
          </el-button>

          <el-button
            v-auth="{v:['crm:directPlan:pms'],bool:datas.planStatus == 1 || datas.planStatus == -1 || datas.flowStatus=='REJECT_INITIATOR'}"
            class="main-btn"
            size="small"
            type="primary"
            @click="onAudit"
          >提交审核
          </el-button>
          <el-button
            v-auth="{v:['crm:directPlan:end'],bool:datas.planStatus == 3}"
            class="main-btn"
            size="small"
            type="primary"
            @click="endPlan"
          >结束招商
          </el-button>
        </template>

      </template>

    </header-module>

    <div class="main-content">
      <el-form
        :inline="true"
        label-position="right"
        label-width="120px"
        class="form-detail"
      >
        <el-row>
          <el-col :span="8">
            <el-form-item label="招商规划编号：">
              {{ datas.planNo }}
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="招商规划名称：">
              {{ datas.planName }}
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="招商地区："
              style="width: 100%;"
            >
              <area-list-view :areas="datas.region" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="招商结束日期：">
              {{ dateFormat("yyyy-mm-dd", datas.expireTime) }}
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="通用名：">
              {{ datas.productPopularName }}
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="商品名：">
              {{ datas.productName }}
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="包装规格：">
              {{ datas.packSpecs }}
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="生产厂家：">
              {{ datas.producer }}
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="终端价：">
              {{ datas.terminalPrice }}元/{{ getLabel('sell_unit', datas.sellUnit) }}
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="来源：">
              {{ datas.planSource }}
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="关联市场准入：">
              <el-link
                v-if="datas.chanceId"
                :underline="false"
                style="display: flex;align-items: center"
                type="primary"
                @click="onClick"
              >
                {{ datas.chanceName }}
              </el-link>
              <span v-else>暂无</span>
            </el-form-item>
          </el-col>
        </el-row>
        <!--
        <el-row>
          <el-col :span="24">
            <el-form-item label="其他描述：">
              <div v-if="datas.remark">{{ datas.remark }}</div>
              <div v-else>暂无</div>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="其他附件：">
              <div v-if="datas.files && datas.files.length">
                <upload-file-view
                  :file-arr="datas.files"
                  :is-upload="false"
                />
              </div>
              <div v-else>暂无</div>
            </el-form-item>
          </el-col>
        </el-row>
        -->
      </el-form>
      <el-tabs
        v-model="activeName"
        class="elTabs"
        style="margin-top: 20px"
      >
        <el-tab-pane
          label="规划地区明细"
          name="first"
        >
          <areaView
            :datas="datas"
            :list="list"
          />
        </el-tab-pane>
        <el-tab-pane
          label="修改记录"
          name="second"
        >
          <operation-view />
        </el-tab-pane>
      </el-tabs>

    </div>

    <!-- 计划详情 -->
    <detail-drawer
      ref="detailDrawer"
      :size-width="1000"
      custom-title
    >
      <template #title>
        <span>关联市场准入 - {{ datas.chanceName }}</span>
      </template>
      <template #contents>

        <chance-info :id="datas.chanceId" />

      </template>
    </detail-drawer>

  </div>
</template>

<script>
import { useRoute, useRouter } from 'vue-router'
import {
  defineAsyncComponent,
  defineComponent,
  getCurrentInstance,
  inject,
  onMounted,
  reactive,
  toRefs,
} from 'vue'

export default defineComponent({
  name: 'Index',
  components: {
    chanceInfo: defineAsyncComponent(() =>
      import('../../../commonView/detailComponents/business/chanceInfo.vue')
    ),
    areaView: defineAsyncComponent(() => import('./modules/areaView.vue')),
  },
  setup() {
    const currentInstance = getCurrentInstance()
    const route = useRoute()
    const router = useRouter()
    const api = inject('api')
    var data = reactive({
      activeName: 'first',
      datas: {},
      list: [],
      detailDrawer: null,
    })

    const onBack = () => {
      router.back()
    }

    const onEdit = () => {
      router.push({ name: 'addDirectPlan', query: { id: data.datas.id }})
    }

    const onAudit = () => {
      if (!data.list.length) {
        currentInstance.proxy.customMessage({
          type: 'error',
          message: '请添加地区信息',
        })
        return
      }
      currentInstance.proxy
        .alertBox({
          message: '是否提交审核该规划？',
          title: '审核',
        })
        .then(() => {
          api.plan.PLAN_CHECK_COMMIT({ id: data.datas.id }).then((res) => {
            if (res.code) {
              currentInstance.proxy.customMessage({
                type: 'error',
                message: res.msg,
              })
            } else {
              currentInstance.proxy.customMessage({
                type: 'success',
                message: '提交成功',
              })
              getData()
            }
          })
        })
        .catch((err) => {
          console.log(err)
        })
    }

    const onDelete = () => {
      currentInstance.proxy
        .alertBox({
          message: '是否确认删除该规划？',
          title: '删除',
        })
        .then(() => {
          api.plan.PLAN_DELETE_BYID({ id: data.datas.id }).then((res) => {
            if (res.code) {
              currentInstance.proxy.customMessage({
                type: 'error',
                message: res.msg,
              })
            } else {
              currentInstance.proxy.customMessage({
                type: 'success',
                message: '删除成功',
              })
              router.back()
            }
          })
        })
        .catch((err) => {
          console.log(err)
        })
    }

    const endPlan = () => {
      currentInstance.proxy
        .alertBox({
          message:
            '结束招商规划后，待开发、开发失败的地区将停止招商，确定结束？',
          title: '结束',
        })
        .then(() => {
          api.plan.PLAN_DETAIL_END({ id: data.datas.id }).then((res) => {
            if (res.code) {
              currentInstance.proxy.customMessage({
                type: 'error',
                message: res.msg,
              })
            } else {
              currentInstance.proxy.customMessage({
                type: 'success',
                message: '操作成功',
              })
              getData()
            }
          })
        })
        .catch((err) => {
          console.log(err)
        })
    }

    const onClick = () => {
      data.detailDrawer.open()
    }

    const getData = () => {
      api.plan.GET_PLAN_DETAIL({ id: route.query.id }).then((res) => {
        if (!res.code) {
          data.datas = res.data.plan.planInfo
          data.list = res.data.plan.planDetail

          data.list.forEach((a) => {
            a.name = a.streetName ? a.areaName + '/' + a.streetName : a.areaName
          })
        } else {
          currentInstance.proxy.customMessage({
            type: 'error',
            message: res.msg,
          })
        }
      })
    }

    const getState = (state) => {
      if (!state) {
        return ''
      }
      switch (state) {
        case '-1':
          return '审核未通过'
        case '1':
          return '草稿'
        case '2':
          return '审核中'
        case '3':
          return '进行中'
        case '4':
          return '已结束'
      }
    }

    onMounted(() => {
      getData()
    })

    return {
      ...toRefs(data),

      onBack,
      onEdit,
      onClick,
      onDelete,
      endPlan,
      onAudit,
      getState,
    }
  },
})
</script>

<style scoped>
</style>
